<template>
  <div class="layout">
    <div class="layout-header">
      <i-row class="container" type="flex" justify="center" align="middle">
        <i-col :sm="6" :xs="1">
          <div class="layout-logo">
            <img src="/private/logo.png" height="34" />
          </div>
        </i-col>
        <i-col :sm="12" :xs="17">
          <quick-search style="margin: 15px auto;max-width: 400px;" :active="true"></quick-search>
        </i-col>
        <i-col :xs="6" class="layout-toolbar">
          <profile-nav></profile-nav>
        </i-col>
      </i-row>
    </div>
    <div class="container main-nav">
      <div class="main-nav-left">
        <a href="#"><i-icon type="navicon-round"></i-icon> 全部课程</a>
        <ul>
          <li v-for="(grades, index) in gradeSubjects" :key="'gradeSubject_' + index">
            <span class="item-head">{{index}}</span>
            <ul>
              <li v-for="(grade, gradeIndex) in grades" :key="'gradeSubject_' + index + '_' + gradeIndex">
                <grade-subjects :index="grade.index" :name="grade.name"></grade-subjects>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="main-nav-body">
        <ul>
          <li><router-link :to="{name: 'home'}">首页</router-link></li>
          <li><router-link :to="{name: 'courses'}">课程</router-link></li>
          <li><router-link :to="{name: 'tags'}">知识点</router-link></li>
          <li><router-link :to="{name: 'notes'}">淘笔记</router-link></li>
          <li><router-link :to="{name: 'questions'}">问答</router-link></li>
          <li><router-link :to="{name: 'lives'}">直播</router-link></li>
          <li><router-link :to="{name: 'news'}">新闻资讯</router-link></li>
          <li><router-link :to="{name: 'dashboard'}" v-if="account.isAdmin">后台管理</router-link></li>
        </ul>
      </div>
      <i-carousel :height="320" arrow="never" autoplay v-model="currentCarouselItem">
        <i-carousel-item :style='{ background: `url(${item.image})  50% 0px / cover no-repeat` }' v-for="(item, index) in carouselItems" v-bind:key="'carousel' + index" >
        </i-carousel-item>
      </i-carousel>
    </div>
    <div class="layout-body">
      <ul class="fake-tabs">
        <li v-for="courseType in courseTypes" v-bind:key="'courseType_' + courseType.key">
          <a href="javascript:;" :class="{active: courseType.key == currentCourseTypeKey}" @click="currentCourseTypeKey=courseType.key">{{courseType.text}}</a>
        </li>
      </ul>
      <div class="container">
        <i-row :gutter="20">
          <i-col :md="6" :sm="8" :xs="12" v-for="(item, index) in courses" v-bind:key="'home_course_' + index">
            <course-item :data="item"></course-item>
          </i-col>
        </i-row>
        <p style="text-align: center;margin-top:10px;">
          <i-button shape="circle" type="primary" style="width:200px;font-size:14px;" @click="moreCourses()">点击查看更多课程 <i-icon type="ios-arrow-thin-right"></i-icon></i-button>
        </p>
        <i-row :gutter="20" class="ranking">
          <i-col :sm="6" :xs="24">
            <i-card dis-hover>
              <p slot="title">勤劳的园丁</p>
              <router-link :to="{path: '/ranking/courseOwners'}" slot="extra">
                <span>查看更多</span>
              </router-link>
              <ul>
                <li v-for="(item, index) in ranking.courseOwners" v-bind:key="'courseOwners_' + index" :class="{active: index < 3}">
                  <a><span>{{index + 1}}</span>{{item.entity.name}}</a>
                </li>
              </ul>
            </i-card>
          </i-col>
          <i-col :sm="6" :xs="24">
            <i-card dis-hover>
              <p slot="title">最热知识点</p>
              <router-link :to="{path: '/ranking/tags'}" slot="extra">
                <span>查看更多</span>
              </router-link>
              <ul>
                <li v-for="(item, index) in ranking.tags" v-bind:key="'tags_' + index" :class="{active: index < 3}">
                  <a><span>{{index + 1}}</span>{{item.entity.name}}</a>
                </li>
              </ul>
            </i-card>
          </i-col>
          <i-col :sm="6" :xs="24">
            <i-card dis-hover>
              <p slot="title">最热笔记</p>
              <router-link :to="{path: '/ranking/notes'}" slot="extra">
                <span>查看更多</span>
              </router-link>
              <ul>
                <li v-for="(item, index) in ranking.notes" v-bind:key="'notes_' + index" :class="{active: index < 3}">
                  <a><span>{{index + 1}}</span>{{item.entity.title}}</a>
                </li>
              </ul>
            </i-card>
          </i-col>
          <i-col :sm="6" :xs="24">
            <i-card dis-hover>
              <p slot="title">活跃在讨论区</p>
              <router-link :to="{path: '/ranking/postOwners'}" slot="extra">
                <span>查看更多</span>
              </router-link>
              <ul>
                <li v-for="(item, index) in ranking.postOwners" v-bind:key="'postOwners_' + index" :class="{active: index < 3}">
                  <a><span>{{index + 1}}</span>{{item.entity.name}}</a>
                </li>
              </ul>
            </i-card>
          </i-col>
        </i-row>
      </div>
    </div>
  </div>
</template>

<script>
import GradeSubjects from './GradeSubjects'
import CourseItem from '../components/course-item'
import ProfileNav from '../components/main-nav/Profile'
import { mapGetters, mapActions } from 'vuex'
import QuickSearch from '../components/quick-search'
export default {
  components: {
    GradeSubjects,
    CourseItem,
    QuickSearch,
    ProfileNav
  },
  name: 'home',
  methods: {
    ...mapActions({
      loadGrades: 'loadGrades',
      getTop6Courses: 'getTop6Courses',
      getCurrentRanking: 'getCurrentRanking'
    }),
    moreCourses() {
      var type = this.currentCourseTypeKey
      this.$router.push({ name: 'courses', query: { orderBy: type } })
    }
  },
  watch: {
    currentCourseTypeKey(val) {
      let that = this
      that.getTop6Courses({
        orderBy: val,
        callback(data) {
          that.courses = data.courses
        }
      })
    }
  },
  mounted() {
    this.currentCourseTypeKey = this.courseTypes[1].key
    let that = this
    this.getCurrentRanking({
      callback(data) {
        that.ranking = data
      }
    })
  },
  computed: {
    ...mapGetters({
      grades: 'grades',
      account: 'account'
    }),
    gradeSubjects() {
      const grades = this.grades
      let gradeSubjects = {}
      grades.forEach(grade => {
        var key = grade.name[0] + '中教育'
        gradeSubjects[key] = gradeSubjects[key] || []
        gradeSubjects[key].push(grade)
      })
      return gradeSubjects
    }
  },
  data() {
    return {
      currentCourseTypeKey: null,
      courseTypes: [
        {
          key: 'ViewedDesc',
          text: '最受欢迎'
        },
        {
          key: 'CreatedAtDesc',
          text: '最新上传'
        },
        {
          key: 'RecommendedDesc',
          text: '大家推荐'
        },
        {
          key: 'CourseSticky',
          text: '名师课堂'
        }
      ],
      courses: [],
      ranking: {},
      currentCarouselItem: 0,
      carouselItems: [
        {
          image: 'http://cover.vkoimg.cn/ad/1490003459679.jpg',
          href: ''
        },
        {
          image: 'http://cover.vkoimg.cn/ad/1514534276703.jpg',
          href: ''
        },
        {
          image: 'http://cover.vkoimg.cn/ad/1490003459679.jpg',
          href: ''
        },
        {
          image: 'http://cover.vkoimg.cn/ad/1490003459679.jpg',
          href: ''
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.layout {
  // background: #f5f7f9;
  background: white;
  position: relative;
  overflow: hidden;
}
.layout-logo {
  border-radius: 3px;
  width: 120px;
}
.layout-header {
  height: 60px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);

  .layout-toolbar {
    .toolbar-item {
      display: inline-block;
      margin-left: 10px;
      a {
        color: #333;
        font-size: 13px;
      }
    }
  }
}

.layout-body {
  background: #f5f7f9;
  padding-bottom: 20px;
  .ranking {
    margin-top: 40px;
    .ivu-card {
      margin-bottom: 10px;
    }
    .ivu-card-head {
      p {
        font-weight: normal !important;
      }
    }
    .ivu-card-extra {
      a {
        color: #333;
        &:hover {
          color: #39f;
        }
      }
    }
    li {
      list-style: none;
      a {
        padding: 3px 0;
        display: block;
        color: #000;
        > span {
          display: inline-block;
          width: 22px;
          text-align: center;
          height: 22px;
          margin-right: 5px;
          color: white;
          background: gray;
          border: 1px solid darken(gray, 10%);
        }
      }
      &.active {
        a {
          > span {
            background: #39f;
            border-color: darken(#39f, 10%);
          }
        }
      }
    }
  }
}
.layout-ranking {
  margin-top: 20px;
}
.main-nav {
  margin-top: 55px;
  position: relative;
  .main-nav-body {
    position: absolute;
    top: -46px;
    left: 240px;
    ul {
      li {
        display: inline-block;
        a {
          color: #000;
          padding: 10px 20px;
          font-size: 16px;
          display: block;
          &:hover {
            color: #39f;
          }
        }
      }
    }
  }
  .main-nav-left {
    position: absolute;
    top: -46px;
    left: 15px;
    bottom: 0;
    width: 200px;
    z-index: 999;
    color: white !important;

    background: rgba(57, 57, 57, 0.7);
    > a {
      display: block;
      color: white;
      background: #39f;
      padding: 10px 15px;
      font-size: 18px;
    }

    > ul {
      span {
        padding: 8px 10px 8px 25px;
        display: block;
        font-size: 14px;
        cursor: pointer;
        &:hover {
          background: rgba(57, 57, 57, 0.7);
        }
      }
      .item-head {
        color: white;
        font-size: 16px;
        cursor: default;
        padding: 8px 10px 8px 15px;
        background: none !important;
      }
    }
  }
}
</style>
